<?php
/**
 * 登录页面内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('用户登录');

// 页面特定样式
$page_styles = <<<HTML
<style>
    .login-container {
        max-width: 450px;
        margin: 50px auto;
        padding: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 5px solid #f8f9fa;
    }
    
    .login-title {
        text-align: center;
        color: #4a90e2;
        margin-bottom: 30px;
        font-weight: bold;
    }
    
    .login-form .form-group {
        margin-bottom: 20px;
    }
    
    .login-form .form-control {
        height: 50px;
        border-radius: 10px;
        box-shadow: none;
        border: 2px solid #e9ecef;
        padding-left: 15px;
        transition: all 0.3s ease;
    }
    
    .login-form .form-control:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
    }
    
    .login-form .btn-primary {
        height: 50px;
        border-radius: 10px;
        background-color: #4a90e2;
        border-color: #4a90e2;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }
    
    .login-form .btn-primary:hover {
        background-color: #3a80d2;
        border-color: #3a80d2;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
    }
    
    .login-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .login-register-link {
        text-align: center;
        margin-top: 20px;
    }
    
    .login-social {
        text-align: center;
        margin-top: 30px;
    }
    
    .login-social-title {
        position: relative;
        margin-bottom: 20px;
        font-size: 14px;
        color: #6c757d;
    }
    
    .login-social-title:before, 
    .login-social-title:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 35%;
        height: 1px;
        background-color: #e9ecef;
    }
    
    .login-social-title:before {
        left: 0;
    }
    
    .login-social-title:after {
        right: 0;
    }
    
    .login-social-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    
    .login-social-button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
        transition: all 0.3s ease;
    }
    
    .login-social-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .login-social-button.facebook {
        background-color: #3b5998;
    }
    
    .login-social-button.twitter {
        background-color: #1da1f2;
    }
    
    .login-social-button.google {
        background-color: #db4437;
    }
    
    .login-social-button.wechat {
        background-color: #09b83e;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container">
    <div class="login-container">
        <h2 class="login-title">欢迎回来</h2>
        
        <form class="login-form" action="<?php echo asset_url('login'); ?>" method="post">
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的邮箱">
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码">
            </div>
            
            <div class="login-options">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="remember" name="remember">
                    <label class="form-check-label" for="remember">记住我</label>
                </div>
                <a href="<?php echo page_url('forgot-password'); ?>" class="forgot-password">忘记密码?</a>
            </div>
            
            <button type="submit" class="btn btn-primary w-100">登录</button>
        </form>
        
        <div class="login-register-link">
            还没有账号? <a href="<?php echo page_url('register'); ?>">立即注册</a>
        </div>
        
        <div class="login-social">
            <div class="login-social-title">或通过以下方式登录</div>
            <div class="login-social-buttons">
                <a href="#" class="login-social-button facebook">
                    <i class="bi bi-facebook"></i>
                </a>
                <a href="#" class="login-social-button wechat">
                    <i class="bi bi-wechat"></i>
                </a>
                <a href="#" class="login-social-button google">
                    <i class="bi bi-google"></i>
                </a>
            </div>
        </div>
    </div>
</div> 